<template>
    <div id="lineChartContainer" class="chartContainer" ref="lineChartContainer" :info="getChartData">

    </div>
</template>

<script>
import * as echarts from 'echarts';
import {doThirdServiceValue} from "@/request/lowcode/thirdService";
import { markRaw } from 'vue';

export default {
    name: "LineChartComponent",
    props: ['propJson', 'commonParam'],
    data() {
        return {
            chartData: [],
            chartOption: {},
            myChart: null
        }
    },
    methods: {
        execLegendThen(res, awaitObj) {
            if (res instanceof String) {
                awaitObj.data = JSON.parse(res.replaceAll("\'", "\""));
            } else {
                awaitObj.data = res;
            }
        },
        execChartDataThen(res, awaitObj) {
            this.chartData = res;
        }
    },
    computed: {
        async getChartData() {
            let awaitObj = {}
            await doThirdServiceValue(this.propJson.chartDataValue, this.commonParam, this.execChartDataThen, () => {}, awaitObj)
        }
    },
    watch: {
        chartData(newValue,oldValue) {
            if (this.myChart === null) {
                return;
            }
            let tempList = newValue
            let resSeriesList = []
            for (let index = 0; index < tempList.length; index++) {
                let tempSourceInfo = tempList[index]
                let tempInfo = {
                    type: 'line',
                    data: tempSourceInfo.data
                }
                if (this.propJson.isAddAreaStyle) {
                    tempInfo.areaStyle = {};
                }
                if (this.propJson.isAddAreaLight) {
                    tempInfo.emphasis = {
                        focus: this.propJson.areaLightType
                    }
                }
                if (this.propJson.isSmooth) {
                    tempInfo.smooth = true;
                }
                // 判断是否为多数据
                if (this.propJson.isAddLegend) {
                    tempInfo.name = tempSourceInfo.name
                }
                resSeriesList.push(tempInfo)
            }
            this.chartOption.series = resSeriesList;
            // 绘制图表
            this.myChart.setOption(this.chartOption);
        }
    },
    async mounted() {
        let opt = {height: this.propJson.containerHeight}
        if (!this.propJson.isContainerAutoWidth) {
            opt.width = this.propJson.containerWidth;
        }
        // 基于准备好的dom，初始化echarts实例
        this.myChart = markRaw(echarts.init(this.$refs.lineChartContainer, null, opt));
        let titleInfo = {
            text: this.propJson.title,
            textStyle: {
                fontSize: this.propJson.titleFontSize,
                fontWeight: 'normal'
            }
        }
        let toolTipInfo = {
            show: true,
            z: 1000000,
            trigger: this.propJson.tooltipTrigger,
            axisPointer: {
                type: this.propJson.tooltipAxisPointerType
            }
        }
        let toolboxInfo = {
            feature: {}
        }
        if (this.propJson.isAddSaveImageTool) {
            toolboxInfo.feature.saveAsImage = {
                type: this.propJson.saveImageType,
                name: this.propJson.saveImageName
            }
        }
        if (this.propJson.isAddDataZoom) {
            toolboxInfo.feature.dataZoom = {}
        }
        let gridInfo = {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        }
        let xAxis = {
            type: this.propJson.xAxisType
        }
        if (this.propJson.xAxisType === 'category') {
            let newStr = this.propJson.xAxisData.replaceAll("\'", "\"");
            xAxis.data = JSON.parse(newStr);
        }
        if (this.propJson.xAxisIsBoundaryGap) {
            if (this.propJson.xAxisType === 'category') {
                xAxis.boundaryGap = this.propJson.xAxisCategoryBoundaryGap;
            } else {
                xAxis.boundaryGap = [this.propJson.xAxisBoundaryGapLeft + '%', this.propJson.xAxisBoundaryGapRight + '%'];
            }
        }
        let yAxis = {
            type: this.propJson.yAxisType
        }
        if (this.propJson.yAxisIsBoundaryGap) {
            if (this.propJson.yAxisType === 'category') {
                yAxis.boundaryGap = this.propJson.yAxisCategoryBoundaryGap;
            } else {
                yAxis.boundaryGap = [this.propJson.yAxisBoundaryGapBottom + '%', this.propJson.yAxisBoundaryGapTop + '%'];
            }
        }
        if (this.propJson.yAxisIsAddUnit) {
            let valueInfo = "{value} " + this.propJson.yAxisUnitInfo
            yAxis.axisLabel = {
                //这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
                formatter: valueInfo
            }
        }
        this.chartOption = {
            title: titleInfo,
            toolbox: toolboxInfo,
            grid: gridInfo,
            xAxis: [xAxis],
            yAxis: [yAxis]
        }
        if (this.propJson.isAddToolTip) {
            this.chartOption.tooltip = toolTipInfo
        }
        if (this.propJson.isAddLegend) {
            let awaitObj = {}
            await doThirdServiceValue(this.propJson.legendData, this.commonParam, this.execLegendThen, () => {}, awaitObj)
            this.chartOption.legend = {
                data: awaitObj.data
            }
        }
        let awaitObj = {}
        await doThirdServiceValue(this.propJson.chartDataValue, this.commonParam, this.execChartDataThen, () => {}, awaitObj)
        let tempList = this.chartData
        let resSeriesList = []
        for (let index = 0; index < tempList.length; index++) {
            let tempSourceInfo = tempList[index]
            let tempInfo = {
                type: 'line',
                data: tempSourceInfo.data
            }
            if (this.propJson.isAddAreaStyle) {
                tempInfo.areaStyle = {};
            }
            if (this.propJson.isAddAreaLight) {
                tempInfo.emphasis = {
                    focus: this.propJson.areaLightType
                }
            }
            if (this.propJson.isSmooth) {
                tempInfo.smooth = true;
            }
            // 判断是否为多数据
            if (this.propJson.isAddLegend) {
                tempInfo.name = tempSourceInfo.name
            }
            resSeriesList.push(tempInfo)
        }
        this.chartOption.series = resSeriesList;

        // 绘制图表
        this.myChart.setOption(this.chartOption);
    }
}
</script>

<style scoped lang="less">
</style>